<template>
	<div class="home-banner">
		<XtxCarousel autoPlay :sliders="sliders"></XtxCarousel>
	</div>
</template>

<script>
	import {ref} from 'vue'
	import {findBanner} from '@/api/home'
	
	export default {
		setup() {
			const sliders = ref([])
			findBanner().then(data => {
				sliders.value = data.result
			})
			
			return {sliders}
		}
	}
</script>

<style lang="less" scoped>
	.home-banner {
		width: 1240px;
		height: 500px;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 98;
		
		/deep/ .xtx-carousel {
			.carousel-btn.prev {
				left: 270px;
			} 
			.carousel-indicator {
				padding-left: 250px;
			}
			
		}
	}
</style>